/* 主题变量系统 - 使用CSS原子化方式定义白天和黑夜主题 */

/* 黑夜主题变量（默认主题） */


/* CSS 原子化主题变量 */

:root {
  /* 主背景色系 */
  --bg-primary: linear-gradient(135deg, #0a0f2e 0%, #1a1f3a 50%, #0f1429 100%);
  --bg-secondary: linear-gradient(135deg, #1a1f3a 0%, #0f1429 100%);
  --bg-tertiary: linear-gradient(45deg, #2a3f5a, #3a4f6a, #2a3f5a);
  
  /* 头部导航栏 */
  --header-bg: linear-gradient(135deg, #4a9eff 0%, #6bb6ff 100%);
  --header-shadow: 0 4px 20px rgba(74, 158, 255, 0.3);
  
  /* 边框和装饰 */
  --border-primary: linear-gradient(45deg, #4a9eff, #6bb6ff, #4a9eff);
  --border-glow: 0 0 30px rgba(74, 158, 255, 0.5), inset 0 0 30px rgba(74, 158, 255, 0.1);
  --border-glow-hover: 0 0 50px rgba(74, 158, 255, 0.8), inset 0 0 50px rgba(74, 158, 255, 0.2);
  
  /* 文字颜色 */
  --text-primary: white;
  --text-secondary: rgba(255, 255, 255, 0.9);
  --text-tertiary: rgba(255, 255, 255, 0.8);
  --text-quaternary: rgba(255, 255, 255, 0.6);
  --text-dark: #333;
  
  /* 按钮和交互元素 */
  --btn-bg: rgba(255, 255, 255, 0.2);
  --btn-border: rgba(255, 255, 255, 0.3);
  --btn-hover-bg: rgba(255, 255, 255, 0.3);
  --btn-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  
  /* 控制面板 */
  --panel-bg: rgba(74, 158, 255, 0.1);
  --panel-border: rgba(74, 158, 255, 0.3);
  --panel-shadow: 0 4px 20px rgba(74, 158, 255, 0.2);
  
  /* 选择器 */
  --select-bg: rgba(255, 255, 255, 0.1);
  --select-border: rgba(255, 255, 255, 0.3);
  --select-hover-bg: rgba(255, 255, 255, 0.2);
  --select-hover-border: rgba(74, 158, 255, 0.5);
  --select-focus-border: rgba(74, 158, 255, 0.8);
  --select-focus-shadow: 0 0 0 2px rgba(74, 158, 255, 0.2);
  --select-option-bg: rgba(26, 31, 58, 0.95);
  
  /* 提示气泡 */
  --bubble-bg: rgba(255, 255, 255, 0.95);
  --bubble-color: #333;
  --bubble-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  
  /* 装饰元素 */
  --orb-gradient: linear-gradient(45deg, #ff6b9d, #4a9eff, #6bb6ff, #ff6b9d);
  --orb-shadow: 0 0 30px rgba(255, 107, 157, 0.6), 0 0 60px rgba(74, 158, 255, 0.4);
  
  /* 网格背景 */
  --grid-color: rgba(74, 158, 255, 0.1);
  
  /* 底部装饰 */
  --footer-bg: linear-gradient(135deg, #4a9eff 0%, #6bb6ff 100%);
  --footer-shadow: 0 -4px 20px rgba(74, 158, 255, 0.3);
}

/* 白天主题变量 */
[data-theme="light"] {
  /* 主背景色系 - 明亮色调 */
  --bg-primary: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 50%, #ddeeff 100%);
  --bg-secondary: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
  --bg-tertiary: linear-gradient(45deg, #e6f3ff, #ddeeff, #e6f3ff);
  
  /* 头部导航栏 - 保持蓝色但更亮 */
  --header-bg: linear-gradient(135deg, #87ceeb 0%, #a8d8f0 100%);
  --header-shadow: 0 4px 20px rgba(135, 206, 235, 0.4);
  
  /* 边框和装饰 - 更柔和的蓝色 */
  --border-primary: linear-gradient(45deg, #87ceeb, #a8d8f0, #87ceeb);
  --border-glow: 0 0 30px rgba(135, 206, 235, 0.6), inset 0 0 30px rgba(135, 206, 235, 0.15);
  --border-glow-hover: 0 0 50px rgba(135, 206, 235, 0.9), inset 0 0 50px rgba(135, 206, 235, 0.25);
  
  /* 文字颜色 - 深色文字 */
  --text-primary: #2c3e50;
  --text-secondary: rgba(44, 62, 80, 0.9);
  --text-tertiary: rgba(44, 62, 80, 0.8);
  --text-quaternary: rgba(44, 62, 80, 0.6);
  --text-dark: #2c3e50;
  
  /* 按钮和交互元素 - 半透明深色 */
  --btn-bg: rgba(44, 62, 80, 0.1);
  --btn-border: rgba(44, 62, 80, 0.2);
  --btn-hover-bg: rgba(44, 62, 80, 0.2);
  --btn-shadow: 0 4px 12px rgba(44, 62, 80, 0.15);
  
  /* 控制面板 - 浅色背景 */
  --panel-bg: rgba(135, 206, 235, 0.15);
  --panel-border: rgba(135, 206, 235, 0.4);
  --panel-shadow: 0 4px 20px rgba(135, 206, 235, 0.25);
  
  /* 选择器 - 浅色主题 */
  --select-bg: rgba(255, 255, 255, 0.8);
  --select-border: rgba(44, 62, 80, 0.2);
  --select-hover-bg: rgba(255, 255, 255, 0.9);
  --select-hover-border: rgba(135, 206, 235, 0.6);
  --select-focus-border: rgba(135, 206, 235, 0.9);
  --select-focus-shadow: 0 0 0 2px rgba(135, 206, 235, 0.3);
  --select-option-bg: rgba(255, 255, 255, 0.95);
  
  /* 提示气泡 - 深色文字 */
  --bubble-bg: rgba(255, 255, 255, 0.98);
  --bubble-color: #2c3e50;
  --bubble-shadow: 0 4px 15px rgba(44, 62, 80, 0.15);
  
  /* 装饰元素 - 更柔和的色彩 */
  --orb-gradient: linear-gradient(45deg, #ffb3d1, #87ceeb, #a8d8f0, #ffb3d1);
  --orb-shadow: 0 0 30px rgba(255, 179, 209, 0.7), 0 0 60px rgba(135, 206, 235, 0.5);
  
  /* 网格背景 - 更淡的网格 */
  --grid-color: rgba(135, 206, 235, 0.08);
  
  /* 底部装饰 - 浅色主题 */
  --footer-bg: linear-gradient(135deg, #87ceeb 0%, #a8d8f0 100%);
  --footer-shadow: 0 -4px 20px rgba(135, 206, 235, 0.4);
}

/* 主题切换过渡动画 */
* {
  transition: 
    background-color 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease;
}
